﻿<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="Pragma" content="no-cache" />
  <title>UI template</title>
  <link href="../../assets/css/reset.css" type="text/css" rel="stylesheet">
  <link href="./assets/css/grid.css" type="text/css" rel="stylesheet">
  <link href="./assets/css/main.css" type="text/css" rel="stylesheet">
</head>

<body>
  <main>
   
     
      <!-- <button id="btnCreate" style="width: 100%">Generate poster</button> -->


      <div class="tabs">
        <nav>
          <a href="#primary" class="active"><!-- <i class="icon iconfont ">&#xe611;</i>-->tab1</a>
          <a href="#secondary" >tab2</a>
        </nav>
        <section id="primary">
          <ol class="row">
            <li class="col-8">
              <input id="inputTest" type="number" placeholder="some text" unit="px"></input>
            </li>
            <li class="col-4">
              <label><i class="icon iconfont ">&#xe611;</i></label>
              <div id="testInput" class="place-show" contenteditable="true" placeholder="enter number">10 px</div>
              
            </li>
            <li class="col-2">
              <select id="option0" class="option-button">
                <option value="1">px</option>
                <option value="2">cm</option>
                <option value="3">mm</option>
             </select>
            </li>
            <li class="col-6">
              <label><i class="icon iconfont ">&#xe611;</i></label>
              <div id="testInput2" class="place-show" contenteditable="false" placeholder="number"></div>
            </li>
            <li class="col-6">
              <div id="btn1" class="check-button active">
                <i class="icon iconfont ">&#xe611;</i> <span>my text</span>
                
              </div>
              <div></div>
            </li>
            <li  class="col-3">
              <div id="btn2" class="check-button">
                <i class="icon iconfont ">&#xe611;</i> 
              </div>
            </li>
            <li  class="col-3">
              <div id="btn3" class="check-button active">
                <i class="icon iconfont ">&#xe611;</i> 
              </div>
              
            </li>
            <li class="col-6">
              <select id="option1" class="option-button">
                 <option value="1">one</option>
                 <option value="2">two</option>
                 <option value="3">three</option>
              </select>
            </li>
          </ol>
        </section>
        <section id="secondary">
          <ol>
            <li>a</li>
            <li>b</li>
          </ol>
        </section>
      </div>
      
      <button id="testBtn" >test</button>
      




































  </main>

  <!-- <script type="text/javascript" src="../../assets/js/CSInterface.js"></script> -->
  <script type="text/javascript" src="../../assets/js/jquery2.1.js"></script>
  <!-- <script type="text/javascript" src="./bindClickEvents.js"></script> -->
  <script type="text/javascript" src="./assets/js/ui.js"></script>
  <script type="text/javascript" src="./bindEvents.js"></script>
  

</body>

</html>

   <!-- <div class="row">
        <div class="col-6">
          <label>　　宽：</label><input type="number" value="100" id="width"> 像素
        </div>
  
        <div class="row">
          <div class="col-6">
            <button id="btnCreate" style="width: 90vw">创建</button>
          </div>
        </div>
        
        <div class="icons row">
          <div class="col-6">
           
          </div>
        </div>
  
      </div> -->

      <!-- 
      <div class="mr-options">
        <ul id="fmtOption" class="option-group row">

          <li class="col-3"> <span>Mr title:</span></li>
          <li class="col-9" > <div id="fmtTitle" class="item" contenteditable="true" ></div></li>

          <li class="col-3" > <span>Subtitle:</span></li>
          <li class="col-9" > <div id="fmtSubtitle" class="item" contenteditable="true"></div></li>
          <li class="col-3" > <span>KV src:</span></li>
          <li class="col-9" > <div id="kvSrc" class="item" contenteditable="true"></div></li> 

          <li class="col-3" > <span>W:</span></li>
          <li class="col-5" > <div id="kvWidth" class="item" contenteditable="true"></div></li>
          <li class="col-1" > <span>H:</span></li>
          <li class="col-3" > <div id="kvHeight" class="item" contenteditable="true"></div></li>

          <li class="col-1" > <span>L</span></li>
          <li class="col-2" > <div id="kvMainLeft" class="item" contenteditable="true"></div></li>
          <li class="col-1" > <span>T</span></li>
          <li class="col-2" > <div id="kvMainTop" class="item" contenteditable="true"></div></li>
          <li class="col-1" > <span>R</span></li>
          <li class="col-2" > <div id="kvMainRight" class="item" contenteditable="true"></div></li>
          <li class="col-1" > <span>B</span></li>
          <li class="col-2" > <div id="kvMainBottom" class="item" contenteditable="true"></div></li>
          

          <li class="col-3"> <span>Ratio</span></li>
          <li class="col-2"> <div id="fmtLogoRatio" class="item" contenteditable="true"></div></li>
          <li class="col-2"> <div id="fmtVwRatio" class="item" contenteditable="true"></div></li>
         
          <li class="col-1"> <div id="fmtAll" class="item svg-icon">
            <svg class="icon" viewBox="-200 -200 1424 1424" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14460" width="200" height="200"><path d="M526.456247 959.449845v-369.945657h369.945657v369.945657h-369.945657z m-462.432071 0v-369.945657h369.945656v369.945657H64.024176z m0-462.432071v-369.945657h369.945656v369.945657H64.024176zM695.706999 66.493413L957.443142 327.768045 695.706999 589.504188 433.969832 327.768045 695.706999 66.493413z" fill="#666666" p-id="14461"></path></svg>
            <div class="tip">全部</div> 
          </li>
          <li class="col-1"> <div id="fmtLight" class="item svg-icon">
            <svg class="icon" viewBox="-200 -200 1424 1424" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12721" width="200" height="200"><path d="M544 832c17.664 0 32 14.336 32 32v128a32 32 0 0 1-32 32h-64a32 32 0 0 1-32-32v-128c0-17.664 14.336-32 32-32h64zM263.082667 715.605333l45.226666 45.226667a32 32 0 0 1 0 45.312l-90.453333 90.453333a32 32 0 0 1-45.226667 0l-45.226666-45.226666a32 32 0 0 1 0-45.226667l90.453333-90.453333a32 32 0 0 1 45.226667 0z m543.061333 0l90.453333 90.538667a32 32 0 0 1 0 45.226667l-45.226666 45.226666a32 32 0 0 1-45.226667 0l-90.453333-90.453333a32 32 0 0 1 0-45.226667l45.226666-45.226666a32 32 0 0 1 45.226667 0zM512 256a256 256 0 1 1 0 512 256 256 0 0 1 0-512zM160 448c17.664 0 32 14.336 32 32v64a32 32 0 0 1-32 32h-128A32 32 0 0 1 0 544v-64c0-17.664 14.336-32 32-32h128z m832 0c17.664 0 32 14.336 32 32v64a32 32 0 0 1-32 32h-128a32 32 0 0 1-32-32v-64c0-17.664 14.336-32 32-32h128zM851.370667 127.317333l45.226666 45.226667a32 32 0 0 1 0 45.226667l-90.453333 90.624a32 32 0 0 1-45.226667 0l-45.226666-45.226667a32 32 0 0 1 0-45.312l90.453333-90.453333a32 32 0 0 1 45.226667 0z m-633.514667 0l90.453333 90.453334a32 32 0 0 1 0 45.312l-45.226666 45.226666a32 32 0 0 1-45.226667 0l-90.453333-90.453333a32 32 0 0 1 0-45.226667l45.226666-45.226666a32 32 0 0 1 45.226667 0zM544 0c17.664 0 32 14.336 32 32v128a32 32 0 0 1-32 32h-64a32 32 0 0 1-32-32v-128c0-17.664 14.336-32 32-32h64z" p-id="12722"></path></svg>
            <div class="tip">浅底</div> 
          </li>
          
          <li class="col-1"> <div id="fmtMob" class="item svg-icon">
            <svg class="icon" viewBox="-200 -200 1424 1424" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15935" width="200" height="200"><path d="M877.714286 585.142857H146.285714V182.857143a146.285714 146.285714 0 0 1 146.285715-146.285714h438.857142a146.285714 146.285714 0 0 1 146.285715 146.285714v402.285714z m0 73.142857v146.285715a146.285714 146.285714 0 0 1-146.285715 146.285714H292.571429a146.285714 146.285714 0 0 1-146.285715-146.285714v-146.285715h731.428572z m-365.714286 219.428572a73.142857 73.142857 0 1 0 0-146.285715 73.142857 73.142857 0 0 0 0 146.285715z" p-id="15936"></path></svg>
            <div class="tip">移动</div> 
          </li>
          <li class="col-1"> <div id="fmQR" class="item svg-icon">
            <svg class="icon" viewBox="-200 -200 1424 1424" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17502" width="200" height="200"><path d="M85.333333 568.888889h369.777778v369.777778H85.333333V568.888889z m113.777778 113.777778v142.222222h142.222222v-142.222222H199.111111zM85.333333 85.333333h369.777778v369.777778H85.333333V85.333333z m113.777778 113.777778v142.222222h142.222222V199.111111H199.111111z m369.777778-113.777778h369.777778v369.777778H568.888889V85.333333z m113.777778 113.777778v142.222222h142.222222V199.111111h-142.222222z m0 540.444445h142.222222v-170.666667h113.777778v369.777778h-113.777778v-85.333334h-142.222222v85.333334h-113.777778v-199.111111h113.777778z m-113.777778-170.666667h113.777778v113.777778h-113.777778v-113.777778z" fill="#000000" p-id="17503"></path></svg>
            <div class="tip">扫码</div> 
          </li>
        </ul>

        <div class="row">
          <div class="col-12">
            <button id="putJettaFormat" style="width: 88vw; margin: 0 5vw">Generate Format</button>
          </div>
        </div>
      </div>
      -->